<!DOCTYPE HTML>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="ydong博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="http://ydongabc.gitee.io/blog">
    <!--SEO-->

<meta name="keywords" content="vue-cli脚手架,性能优化">


<meta name="description" content="1.在vue.config.js中使用chainWebpack添加externals配置12345678910111213141516171819202122232425262728293031...">


<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">
    <!--Title-->

<title>
    
    vue-cli3打包项目使用CDN的方式引入框架文件 |
    
    ydong博客
</title>

<link rel="alternate" href="/atom.xml" title="ydong博客" type="application/atom+xml">


<link rel="icon" href="./favicon.ico">

    

<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.7.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">
    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

</head></html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    /blog/./img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='John Doe'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://ydongabc.gitee.io/blog">
                        ydong博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/前端/"><i class="fa "></i>
                                前端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/后端/"><i class="fa "></i>
                                后端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/工具/"><i class="fa "></i>
                                工具</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="vue-cli3打包项目使用CDN的方式引入框架文件">
            
            vue-cli3打包项目使用CDN的方式引入框架文件
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/blog/categories/工具/">工具</a> <a class="category-link" href="/blog/categories/工具/vue-cli/">vue-cli</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/blog/tags/vue-cli脚手架/">vue-cli脚手架</a> <a class="tag-link" href="/blog/tags/性能优化/">性能优化</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2020/02/27</span>
    </span>
    
    
</div>
        
        
    </div>
    
    <div class="post-body post-content">
        <h3 id="1-在vue-config-js中使用chainWebpack添加externals配置"><a href="#1-在vue-config-js中使用chainWebpack添加externals配置" class="headerlink" title="1.在vue.config.js中使用chainWebpack添加externals配置"></a>1.在vue.config.js中使用chainWebpack添加externals配置</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (process.env.NODE_ENV === <span class="string">'production'</span>) &#123;</span><br><span class="line">            <span class="comment">// #region 忽略生成环境打包的文件</span></span><br><span class="line">            <span class="keyword">var</span> externals = &#123;</span><br><span class="line">                <span class="string">'vue'</span>: <span class="string">'Vue'</span>,</span><br><span class="line">                <span class="string">'axios'</span>: <span class="string">'axios'</span>,</span><br><span class="line">                <span class="string">'element-ui'</span>: <span class="string">'ELEMENT'</span>,</span><br><span class="line">                <span class="string">'vue-router'</span>: <span class="string">'VueRouter'</span>,</span><br><span class="line">                <span class="string">'vuex'</span>: <span class="string">'Vuex'</span>,</span><br><span class="line">                <span class="string">'echarts'</span>: <span class="string">'echarts'</span></span><br><span class="line">            &#125;</span><br><span class="line">            config.externals(externals)</span><br><span class="line"></span><br><span class="line">            <span class="comment">// 在html文件中引入相关CDN</span></span><br><span class="line">            <span class="keyword">const</span> cdn = &#123;</span><br><span class="line">                css: [</span><br><span class="line">                    <span class="comment">// element-ui css</span></span><br><span class="line">                    <span class="string">'https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css'</span></span><br><span class="line">                ],</span><br><span class="line">                js: [</span><br><span class="line">                    <span class="comment">// vue</span></span><br><span class="line">                    <span class="string">'https://cdn.staticfile.org/vue/2.5.22/vue.min.js'</span>,</span><br><span class="line">                    <span class="comment">// vue-router</span></span><br><span class="line">                    <span class="string">'https://cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js'</span>,</span><br><span class="line">                    <span class="comment">// vuex</span></span><br><span class="line">                    <span class="string">'https://cdn.staticfile.org/vuex/3.1.0/vuex.min.js'</span>,</span><br><span class="line">                    <span class="comment">// axios</span></span><br><span class="line">                    <span class="string">'https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js'</span>,</span><br><span class="line">                    <span class="comment">// element-ui js</span></span><br><span class="line">                    <span class="string">'https://cdn.bootcss.com/element-ui/2.13.0/index.js'</span>,</span><br><span class="line">                    <span class="comment">//echarts</span></span><br><span class="line">                    <span class="string">'https://cdn.bootcss.com/echarts/4.6.0/echarts-en.common.js'</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">            config.plugin(<span class="string">'html'</span>)</span><br><span class="line">                .tap(<span class="function"><span class="params">args</span> =&gt;</span> &#123;</span><br><span class="line">                    args[<span class="number">0</span>].cdn = cdn</span><br><span class="line">                    <span class="keyword">return</span> args</span><br><span class="line">                &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">//...省略的其它代码</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-在项目index-html主页中引入CDN资源"><a href="#2-在项目index-html主页中引入CDN资源" class="headerlink" title="2.在项目index.html主页中引入CDN资源"></a>2.在项目index.html主页中引入CDN资源</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"icon"</span> <span class="attr">href</span>=<span class="string">"&lt;%= BASE_URL %&gt;favicon.ico"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">process.env.NODE_ENV</span> === <span class="string">'production'</span>) &#123; %&gt;</span></span><br><span class="line"></span><br><span class="line">      <span class="tag">&lt;<span class="name">%</span> <span class="attr">for</span>(<span class="attr">var</span> <span class="attr">css</span> <span class="attr">of</span> <span class="attr">htmlWebpackPlugin.options.cdn.css</span>) &#123; %&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"&lt;%=css%&gt;"</span> <span class="attr">rel</span>=<span class="string">"preload"</span> <span class="attr">as</span>=<span class="string">"style"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"&lt;%=css%&gt;"</span> <span class="attr">as</span>=<span class="string">"style"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">%</span> &#125; %&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">%</span> <span class="attr">for</span>(<span class="attr">var</span> <span class="attr">js</span> <span class="attr">of</span> <span class="attr">htmlWebpackPlugin.options.cdn.js</span>) &#123; %&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"&lt;%=js%&gt;"</span> <span class="attr">rel</span>=<span class="string">"preload"</span> <span class="attr">as</span>=<span class="string">"script"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"&lt;%=js%&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">%</span> &#125; %&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> &#125; %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>bxxt<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">noscript</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">strong</span>&gt;</span>We're sorry but bxxt doesn't work properly without JavaScript enabled. Please enable it to continue.<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">noscript</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- built files will be auto injected --&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-将先前引入的框架文件代码注释掉再进行打包"><a href="#3-将先前引入的框架文件代码注释掉再进行打包" class="headerlink" title="3.将先前引入的框架文件代码注释掉再进行打包"></a>3.将先前引入的框架文件代码注释掉再进行打包</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// elemntui组件库,打包部署采用cdn需注释掉</span></span><br><span class="line"><span class="comment">// import ElementUI from 'element-ui';</span></span><br><span class="line"><span class="comment">// import 'element-ui/lib/theme-chalk/index.css';</span></span><br><span class="line"><span class="comment">// import 'element-ui/lib/theme-chalk/display.css';</span></span><br><span class="line"><span class="comment">// Vue.use(ElementUI);</span></span><br></pre></td></tr></table></figure>

<h3 id="4-打包"><a href="#4-打包" class="headerlink" title="4.打包"></a>4.打包</h3><pre><code>$ npm run build</code></pre>
    </div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/blog/2020/04/24/vue引入图片url变量/" class="pre-post btn btn-default" title='vue引入图片url变量'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            vue引入图片url变量</span>
    </a>
    
    
    <a href="/blog/2019/11/24/element表格在前端对全部数据进行排序/" class="next-post btn btn-default" title='element表格在前端对全部数据进行排序'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            element表格在前端对全部数据进行排序</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-在vue-config-js中使用chainWebpack添加externals配置"><span class="toc-text">1.在vue.config.js中使用chainWebpack添加externals配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-在项目index-html主页中引入CDN资源"><span class="toc-text">2.在项目index.html主页中引入CDN资源</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-将先前引入的框架文件代码注释掉再进行打包"><span class="toc-text">3.将先前引入的框架文件代码注释掉再进行打包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-打包"><span class="toc-text">4.打包</span></a></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/blog/js/app.js?rev=@@hash"></script>
</body>
</html>